<template>
  <div class="departments">
    <el-card>
      <template #header>
        <span class="cardHeader">组织结构</span>
      </template>
      <div class="tree">
        <TreeItem
          style="padding-bottom:10px;border-bottom:1px solid #cfcfcf;"
          :item="topItem"
        ></TreeItem>
        <!-- 树形结构 -->
        <el-tree :data="list" :props="{ children: 'child' }">
          <template v-slot="{ data }">
            <TreeItem style="width:100%" :item="data"></TreeItem>
          </template>
        </el-tree>
      </div>
    </el-card>
  </div>
</template>

<script>
import { companyDepartment } from '@/api/departments.js'
import TreeItem from './components/tree-item.vue'
export default {
  components: {
    TreeItem
  },
  data () {
    return {
      list: [],
      topItem: {
        name: '',
        manager: '负责人'
      }
    }
  },

  created () {
    this.getDate()
  },
  methods: {
    async getDate () {
      const res = await companyDepartment()
      console.log('组织架构', res)
      this.topItem.name = res.data.companyName
      this.list = this.changeDate(res.data.depts, '')
    },
    changeDate (arr, str = '') {
      return arr.filter(item => {
        if (item.pid === str) {
          // 筛选出最外层
          item.child = this.changeDate(arr, item.id) // 筛选出子级
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.departments {
  padding: 20px;
}
.el-card {
  padding: 20px;
  padding-left: 40px;
  color: #555;
}
::v-deep .el-card__header {
  padding: 20px 0 18px 0;
  border-bottom: 2px solid #ebeef5;
  color: #409eff;
  .cardHeader {
    border-bottom: 2px solid #409eff;
    padding-bottom: 19px;
  }
}
::v-deep .el-card__body {
  margin-top: 35px;
}
::v-deep .el-tree {
  padding-top: 20px;
}
.tree {
  width: 80%;
  margin: 0 auto;
}
</style>
